<template>
	<div>
		<!--开个价弹出框-->
		<van-popup
		  :close-on-click-overlay="false"	
		  @click-overlay="cancle"	
		  v-model="showPricePopup"
		  position="bottom"
		  :style="{ height: '422px' }"
		>     
		
	        <div class="cellGroup borderBottom" @click='changeActiveInput(1)'>
	        	<span class="cellLabel">价格</span>
	        	<span class="cellValue">
	        		<span class="placehode" v-if="!comPrice">￥0.00</span>
	        		<span><span v-if="comPrice">￥</span>{{comPrice}}</span>
	        		<span class="animation" v-if="activeInput==1"></span>
	        	</span>
	        </div>
	        <div class="cellGroup borderBottom" @click='changeActiveInput(2)'>
	        	<span class="cellLabel">原价</span>
	        	<span class="cellValue">
	        		<span class="placehode" v-if="!comOriginalprice">￥0.00</span>
	        		<span><span v-if="comOriginalprice">￥</span>{{comOriginalprice}}</span>
	        		<span class="animation" v-if="activeInput==2"></span>
	        	</span>
	        </div>
	        <div class="cellGroup borderBottom" @click='changeActiveInput(4)'>
	        	<span class="cellLabel">佣金</span>
	        	<span class="cellValue">	
	        		<span class="placehode" v-if="!money">￥0.00</span>
	        		<span><span v-if="money">￥</span>{{money}}</span>
	        		<span class="animation" v-if="activeInput==4"></span>
	        	</span>
	        	<div class="tips">
	        		<span>佣金包含在价格中</span>
	        		<van-icon name="question" color="#1a72ac" class="tips_icon"/>
	        	</div>
	        </div>	        
	        <div class="cellGroup" @click='changeActiveInput(3)'>
	        	<span class="cellLabel">运费</span>
	        	<span class="cellValue">
	        		<span class="placehode" v-if="!freight">￥0.00</span>
	        		<span><span v-if="freight">￥</span>{{freight}}</span>
	        		<span class="animation" v-if="activeInput==3"></span>
	        	</span>
	        	<div >
	                <van-checkbox v-model="comIspost" @change="changeFree">
	                	<span style="color: #999;">包邮</span>
	                </van-checkbox>				
	        	</div>
	        </div>
	        
	        <div style="color: #999;text-indent: 10px;padding-bottom: 10px;">{{label}}</div>
	        
			<div clas="keyboard">
	           <table cellspacing="1" cellpadding="0">
	           	  <tr>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(1)">1</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(2)">2</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(3)">3</div>
	           	  	</td>
	           	  	<td rowspan="2">
	           	  		<div class="cc" @click="clearPrice">
	           	  			<van-icon name="delete" size="20"/>
	           	  		</div>
	           	  	</td>
	           	  </tr>
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(4)">4</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(5)">5</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(6)">6</div></td>
	           	  </tr>  
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(7)">7</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(8)">8</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(9)">9</div></td>
	           	  	<td rowspan="2" style="background: #fceb22;" @click="confirmPrice()">
	           	  		<div class="cc">确定</div>
	           	  	</td>
	           	  </tr> 
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice('.')">.</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(0)">0</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="cancle"><van-icon name="bars" /></div></td>           	  	
	           	  </tr>
	           </table>		
			</div>	
		</van-popup>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
         activeInput:'1', // 用于绑定现在作用于哪个输入框
         comPrice:'',    // 用于绑定商品售价
       	 comOriginalprice:'', // 用于绑定商品原价
       	 comIspost:false,  // 用于绑定是否包邮
       	 freight:'',    // 用于绑定商品运费
       	 money:''       // 用于绑定佣金
       }
	},
    props:{
	    showPricePopup:{
	      type: Boolean,
	      default: false
	    },
	    label:{
	      type: String
	    }	    
    },	
	methods: {	
	  // 初始化渲染函数
	  init(freight,comOriginalprice,comPrice,money,comIspost){
	  	this.freight=freight
	  	this.comOriginalprice=comOriginalprice
	  	this.comPrice=comPrice
	  	this.money=money
	  	this.comIspost=comIspost>0?true:false
	  },
	  // 关闭弹框	
	  cancle(){
	  	 this.$emit('pricePopupCancle')
	  },
      // 改变光标
      changeActiveInput(num){      	
      	this.activeInput=num      	
      	if(this.comPrice){
      		this.comPrice=Number(this.comPrice).toFixed(2)
      	}
      	if(this.comOriginalprice){
      		this.comOriginalprice=Number(this.comOriginalprice).toFixed(2)
      	}
      	if(this.freight){
      		this.freight=Number(this.freight).toFixed(2)
      	}
      	if(this.money){
      		this.money=Number(this.money).toFixed(2)
      	}       	
      },		
	  // 清除按钮点击事件
	  clearPrice(){
	  	let str=this.activeInput.toString()
		switch(str) {
		     case '1':
		        this.comPrice=''
		        break;
		     case '2':		     
		        this.comOriginalprice=''
		        break;
		     case '4':		     
		        this.money=''
		        break;		        
		     case '3':
		        this.comIspost=false
		        this.freight=''
		        break;
		}
	  },
	  // 包邮按钮点击事件	
	  changeFree(res){
	  	if(res){
	  		this.freight='0.00'
	  	}else{
	  		this.freight=''
	  	}
	  },
	  // 点击数字修改价格(数字)
	  changePrice(num){
        let str=this.activeInput.toString()
		switch(str) {
		     case '1':
		        // 阻止没有数字直接输入.或者出现2个. 
		        if(num=='.'){
		          if(!this.comPrice||this.comPrice.indexOf('.')>=0){
		          	return false
		          }
		        }
		        this.comPrice+=num
		        break;
		     case '2':
		        if(num=='.'){
		          if(!this.comOriginalprice||this.comOriginalprice.indexOf('.')>=0){
		          	return false
		          }
		        }		     
		        this.comOriginalprice+=num
		        break;
		     case '4':
		        if(num=='.'){
		          if(!this.money||this.money.indexOf('.')>=0){
		          	return false
		          }
		        }		     
		        this.money+=num
		        break;		        
		     case '3':
		        if(num=='.'){
		          if(!this.freight||this.freight.indexOf('.')>=0){
		          	return false
		          }
		        }		     
		        this.freight+=num
		        break;
		} 	  		  	
	  },
	  // 确认价格
      confirmPrice(){
      	if(!this.comPrice){
      		this.$toast('请确认输入售价');
      		return false
      	}
      	// 修正位数
      	this.comPrice=Number(this.comPrice).toFixed(2)
      	if(this.comOriginalprice){
      		this.comOriginalprice=Number(this.comOriginalprice).toFixed(2)
      	}
      	if(this.freight){
      		this.freight=Number(this.freight).toFixed(2)
      	}
      	if(this.money){
      		this.money=Number(this.money).toFixed(2) 
      	}

      	let obj={
         comPrice:this.comPrice,   
       	 comOriginalprice:this.comOriginalprice, 
       	 comIspost:this.comIspost,  
       	 freight:this.freight,    
       	 money:this.money    		
      	}      	
      	let str='';
        str=obj.comPrice  	
      	this.$emit('confirmPricePopup',obj,str)   	
      }
      
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="">
.cc{display: flex;align-items: center;justify-content: center;}	
table{width: 100%;border:1px solid #ccc}
td{ border: 1px solid #f0f0f0;}
.w25{width: 25%;height: 60px;}
.blod{font-weight: bold;font-size: 18px;}
.animation{display: inline-block;vertical-align: -3px;
width:1px;height:16px;animation: blink 1s infinite steps(1, start)}  
@keyframes blink {
 0%{
   background-color: white;
 }
 50% {
   background-color: black;
 }
 100% {
   background-color: white;
 }
 }
.cellGroup{padding: 10px;display: flex;}
.borderBottom{border-bottom:1px solid #f0f0f0;}
.cellGroup>span{display: inline-block;}
.cellLabel{width: 50px;font-size: 16px;font-weight: bold;}
.cellValue{flex: 1;font-size: 16px;position: relative;}
.placehode{position: absolute;left: 0;color: #999;} 
.tips{color: #ff8080;padding-top: 3px;}
.tips_icon{vertical-align: -3px;margin-left: 10px;font-size: 16px;}
</style>